<script setup lang="ts">
import { ref } from 'vue'
import { ElDescriptions, ElDescriptionsItem, ElCard, ElTag } from 'element-plus'

const certificateList = ref([
  {
    id: 1,
    desc: '证书不可信',
    fingerprint: '[SHA256] 672e9a0fa31bcda683541bbd483a07b66b1fa537f38fbeab605eceadc8c546a0',
    creat_time: '2024-04-30 00:43:27',
    end_time: '2024-10-30 00:43:27',
    status: '未过期',
    name: 'jZ21ia1lmmufw7Z',
    country: '-',
    company: '-',
    issuer_name: 'iZ21ia1lmufy7Z',
    issuer_country: '-',
    issuer_company: '-',
    serial: '3d9678412d3b93a14911a665d73cb2fc',
    used: 'SSL server|INetscape SSL serverIAny Purpose|Any Purpose CA|OCSP helper',
    host: '-'
  },
  {
    id: 2,
    desc: '证书不可信',
    fingerprint: '[SHA256] 3a3699754de9e3b3739c265520ca7f673edc8db1d273fb83dfeb1fd39bf95cad',
    creat_time: '2023-12-01 00:24:00',
    end_time: '2024-06-01 00:24:00',
    status: '已过期',
    name: 'jZ21ia1lmufyy7Z',
    country: '-',
    company: '-',
    issuer_name: 'jZ21ia1lmufyy7Z',
    issuer_country: '-',
    issuer_company: '-',
    serial: '7cd682508bea80ae4dee38aad8d6ca9d',
    used: 'SSL server|INetscape SSL serverIAny Purpose|Any Purpose CA|OCSP helper',
    host: '-'
  },
  {
    id: 3,
    desc: '证书不可信',
    fingerprint: '[SHA256] 22204a3385b3587d3e1cf1 ed6d9df3dbc09c028051497982ddfab41 d68f97cb1',
    creat_time: '2024-04-30 00:43:27',
    end_time: '2024-10-30 00:43:27',
    status: '已过期',
    name: 'jZ21ia1lmmufw7Z',
    country: '-',
    company: '-',
    issuer_name: 'iZ21ia1lmufy7Z',
    issuer_country: '-',
    issuer_company: '-',
    serial: '3d9678412d3b93a14911a665d73cb2fc',
    used: 'SSL server|INetscape SSL serverIAny Purpose|Any Purpose CA|OCSP helper',
    host: '-'
  }
])
</script>
<template>
  <el-card shadow="never" v-for="item in certificateList" :key="item.id" class="cards">
    <el-tag type="danger" class="tags">{{ item.desc }}</el-tag>
    <el-descriptions :column="2">
      <el-descriptions-item label="证书指纹：">{{ item.fingerprint }}</el-descriptions-item>
      <el-descriptions-item label=""></el-descriptions-item>
      <el-descriptions-item label="颁发时间：">{{ item.creat_time }}</el-descriptions-item>
      <el-descriptions-item label="失效时间：">{{ item.end_time }}</el-descriptions-item>
      <el-descriptions-item label="状态：">
        <el-tag :type="item.status === '未过期' ? 'success' : 'info'">{{ item.status }}</el-tag>
      </el-descriptions-item>
      <el-descriptions-item label="使用者名称：">{{ item.name }}</el-descriptions-item>
      <el-descriptions-item label="使用者国家地区：">{{ item.country }}</el-descriptions-item>
      <el-descriptions-item label="使用者单位名称：">{{ item.company }}</el-descriptions-item>
      <el-descriptions-item label="颁发者名称：">{{ item.issuer_name }}</el-descriptions-item>
      <el-descriptions-item label="颁发者国家地区：">
        {{ item.issuer_country }}
      </el-descriptions-item>
      <el-descriptions-item label="颁发者单位名称：">
        {{ item.issuer_company }}
      </el-descriptions-item>
      <el-descriptions-item label="序列号：">{{ item.serial }}</el-descriptions-item>
      <el-descriptions-item label="用途：">{{ item.used }}</el-descriptions-item>
      <el-descriptions-item label="授权域名：">{{ item.host }}</el-descriptions-item>
    </el-descriptions>
  </el-card>
</template>
<style scoped lang="scss">
.cards {
  margin-bottom: 1.25rem;
}
.tags {
  margin-bottom: 0.625rem;
}
</style>
